<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/28
  Time: 8:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

    /*
      需求 根据交易表中不同的阶段的数量进行统计，最终
        形成一个漏斗图(倒三角)
        将统计出来的阶段的数量比较多的，往上面排列
         将统计出来的阶段的数量比较少的，往下面排列

         例如：
          01 资质审查   85条
          02 需求分析  10条
          ...

         sql:
            按照阶段进行分组
            resultType="map"
             select
             stage,count(*)
             from tbl_transaction

             group by stage


     */

%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <script src="ECharts/echarts.min.js"></script>
    <script src="jquery/jquery-1.11.1-min.js"></script>

    <script>
        $(function () {

            //在页面加载完毕后，绘制统计图表
            getCharts();

        })
        
        function getCharts() {

            $.ajax({
                url: "workbench/activity/getCharts.do",
                type:"get",
                dataType:"json",
                success:function (data) {

                    /*
                       data
                       {"total":100,"dataList":[{key:..,value,..},{},{}]
                       ,names[name,name]}

                     */
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    //要画的图
                    var option = {
                        title: {
                            text: '市场活动漏斗图',
                            subtext: '统计市场宣传阶段数量的漏斗图'
                        },
                        toolbox: {
                            feature: {
                                dataView: {readOnly: false},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            data: data.names
                        },

                        series: [
                            {
                                name:'交易漏斗图',
                                type:'funnel',
                                left: '10%',
                                top: 60,
                                //x2: 80,
                                bottom: 60,
                                width: '80%',
                                // height: {totalHeight} - y - y2,
                                min: 0,
                                max: data.total,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 20
                                    }
                                },
                                data: data.dataList/*[
                            {value: 60, name: '访问'},
                            {value: 40, name: '咨询'},
                            {value: 20, name: '订单'},
                            {value: 80, name: '点击'},
                            {value: 100, name: '展现'}
                        ]*/
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                }
            })

        }
    </script>


</head>
<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
     <div id="main" style="width: 900px;height:600px;"></div>

</body>
</html>




























